import Layouts from '@/components/Layout';
import React, { useEffect, useState } from 'react';
import './index.less';
import { Typography, Tabs, Button, Pagination, Empty, Spin } from 'antd';
import LocationImage from '@/components/LocationImage';
import Activity from '@/components/Activity';
import { useParams, history } from 'umi';
import { getCitiesList, getCountriesDetail } from '@/service/api/location';
import { CitiesList, CountriesList } from '@/types/loaction';
import configs from '../../../../config/env';
import { ActivityList, ActivitySearch } from '@/types/touractivity';
import { getActivityList } from '@/service/api/touractivity';
const CountriesDetail: React.FC = () => {
  const params: { cname: string } = useParams();
  const [countryDetailInfo, setCountryDetailInfo] = useState<CountriesList | null>(null);
  const [citiesList, setCitiesList] = useState<CitiesList[]>([]);
  const [searchQuery, setSearchQuery] = useState<ActivitySearch>({
    pageNum: 1,
    pageSize: 9,
    country: params.cname,
  });
  const [listLoading, setListLoading] = useState<boolean>(false);
  const [activityList, setActivityList] = useState<ActivityList[]>([]);
  const [listTotal, setListTotal] = useState<number>(0);
  const getCountryDetailInfo = async () => {
    const { data }: { data: CountriesList } = await getCountriesDetail({
      cname: params.cname,
    });
    if (data) {
      setCountryDetailInfo(data);
    } else {
      history.push('/404');
    }
  };
  const getCountryCityList = async () => {
    const { rows }: { rows: CitiesList[] } = await getCitiesList({
      pageNum: 1,
      pageSize: 4,
      country: params.cname,
    });
    setCitiesList(rows);
  };
  const getActivityDataByCountry = async () => {
    try {
      setListLoading(true);
      const { rows, total }: { rows: ActivityList[]; total: number } = await getActivityList(
        searchQuery,
      );
      setActivityList(rows);
      setListTotal(total);
    } finally {
      setListLoading(false);
    }
  };
  const handleChangePage = (page: number, pageSize: number) => {
    setSearchQuery({
      pageNum: page,
      pageSize,
      country: params.cname,
    });
  };
  useEffect(() => {
    getCountryDetailInfo();
    getCountryCityList();
  }, []);
  useEffect(() => {
    getActivityDataByCountry();
  }, [searchQuery]);
  return (
    <Layouts>
      <div className="countries_detail_wrapper">
        <Typography.Title level={1}>{countryDetailInfo?.cname}</Typography.Title>
        <div className="countries_main">
          <div className="left_intro_images">
            <div className="top_image">
              <img
                src={
                  countryDetailInfo?.imgUrl
                    ? configs[process.env.API_ENV as any].API_SERVER + countryDetailInfo?.imgUrl
                    : '/images/brazil.jpg'
                }
                alt=""
              />
            </div>
            <div className="bottom_images_group">
              {!citiesList.length && (
                <Empty
                  image={Empty.PRESENTED_IMAGE_SIMPLE}
                  style={{ width: '100%' }}
                  description="暂无隶属城市"
                />
              )}
              {citiesList.map((item) => (
                <LocationImage
                  widths={200}
                  heights={120}
                  margins="0 10px"
                  isCity
                  isDetail
                  countryName={item.country}
                  cityName={item.cname}
                  id={item.id}
                  key={item.id}
                  coverImg={item.imgUrl}
                />
              ))}
            </div>
          </div>
          <div className="right_tab_wrapper">
            <Tabs
              defaultActiveKey="1"
              items={[
                {
                  label: `摘要`,
                  key: '1',
                  children: (
                    <div className="intro_panel">
                      {countryDetailInfo?.remark ?? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                    </div>
                  ),
                },
                {
                  label: `提示`,
                  key: '2',
                  children: (
                    <div className="intro_panel">
                      {countryDetailInfo?.tips ?? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                    </div>
                  ),
                },
                {
                  label: `节日`,
                  key: '3',
                  children: (
                    <div className="intro_panel">
                      {countryDetailInfo?.festival ?? (
                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                      )}
                    </div>
                  ),
                },
                {
                  label: `其他`,
                  key: '4',
                  children: (
                    <div className="intro_panel">
                      {countryDetailInfo?.other ?? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                    </div>
                  ),
                },
              ]}
            />
          </div>
        </div>
        <div className="other_info_wrpper">
          <div className="btn_wrap">
            <Button
              type="primary"
              ghost
              onClick={() => {
                history.push('/hold?tab=share');
              }}
            >
              分享活动
            </Button>
          </div>
          <Tabs
            defaultActiveKey="other_tour"
            items={[
              {
                label: `活动`,
                key: 'other_act',
                children: (
                  <div className="other_panel_wrppaer">
                    <p className="other_sub_tit">探索{params.cname}的独特活动</p>
                    <Spin tip="正在玩命加载..." size="large" spinning={listLoading}>
                      <div className="other_data_wrap">
                        {activityList.map((item) => (
                          <Activity
                            key={item.id}
                            id={item.id}
                            country={item.country}
                            remark={item.describes}
                            userInfo={item.user}
                            imgUrl={item.imgUrl}
                            title={item.title}
                            tags={item.tags}
                            city={item.city}
                          ></Activity>
                        ))}
                      </div>
                    </Spin>
                    <div className="pagination_wrapper">
                      {listTotal !== 0 && (
                        <Pagination
                          current={searchQuery.pageNum}
                          total={listTotal}
                          showTitle
                          pageSize={searchQuery.pageSize}
                          showSizeChanger={false}
                          onChange={handleChangePage}
                        />
                      )}
                      {!listLoading && listTotal === 0 && (
                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                      )}
                    </div>
                  </div>
                ),
              },
            ]}
          />
        </div>
      </div>
    </Layouts>
  );
};
export default CountriesDetail;
